<template>
  <view class="message-container">
    <view class='message-content'>
      <!-- 头部切换Tab -->
      <view class="poster-container">
        <view class="poster-data">
          <view class="poster-data-item">
            <view data-type="1" bindtap="switch" class="select-tab">资料设置</view>
            <view :class='selectPoster == 1 ? "select-tab-bootom" : "not-select-tab-bootom"'></view>
          </view>
          <view class="poster-data-item">
            <view data-type="2" bindtap="switch" class="select-tab">留言列表</view>
            <view :class='selectPoster == 2 ? "select-tab-bootom" : "not-select-tab-bootom"'></view>
          </view>
          <view class="poster-data-item select-item">
            <view data-type="3" bindtap="switch" class="select-tab">消息列表</view>
            <view :class='selectPoster == 3 ? "select-tab-bootom" : "not-select-tab-bootom"'></view>
          </view>
        </view>
      </view>
      <!-- 留言列表 -->
      <!-- <view class="friend-container" wx:if="{{selectPoster==2}}">
      <view class="container-content">
        <view class="content-item" 
              wx:for="{{friends}}" 
              wx:key="id"
              data-obj="{{item.friend_id}}"
              bindtap='letter'>
          <view class="user-info">
              <image class="avatar-border" src="/static/image/v2/border.png"></image>
              <image class="avatar" src="{{item.friend.avatar}}"></image>
            <view class="user-name">
              <view class="user-nickname">{{item.friend.nickname}}</view>
              <view class="date-time">{{item.created_at}}</view>
            </view>
          </view>
          <view class="message-count" wx:if="{{item.newMessageNumber > 0}}">{{item.newMessageNumber}}</view>
        </view> 
      </view>
    </view> -->

      <!-- 消息列表 -->
      <!-- <view class='message-item' wx:if="{{selectPoster==3}}" wx:for="{{messageList}}" wx:key="id">
          <view class='item' 
                bindtap="opendDetail" 
                data-parent="{{item.parentObj}}"
                data-pobj="{{item.parentObj.obj_id}}"
                data-type="{{item.obj.obj_type}}"
                data-chat="{{item.obj_type}}"
                data-uid="{{item.from_id}}"
                data-objid="{{item.obj_id}}"
                data-id="{{item.obj.obj_id}}">
            <view class='left'>
              <view class="avatar-view">
                <image class="message-avatar-border" src="/static/image/v2/border.png"></image>
                <image class="avatar" src='{{item.from_user.avatar}}'></image>
              </view>
            </view>
            <view class='content'>
              <view class='username'>
                {{item.from_user.nickname}}
              </view>
              <view class='message' 
                    wx:if="{{item.action_type == 1 && item.parentObj != null}}">
                    {{item.obj.content}}</view>
                    
              <view class='message' 
                    wx:if="{{item.obj_type == 6}}">
                    {{item.content}}</view>

              <view class='message' 
                    wx:if="{{item.obj_type == 7}}">
                    {{item.content}}</view>

              <view class='delete-message' 
                    wx:if="{{item.parentObj == null && item.obj_type != 6}}">
                    该消息已被删除
              </view>
                    
              <view class='praise' 
              wx:if="{{item.action_type == 2 && item.parentObj != null}}">
                <image src='/static/image/make_praise.png'></image>
              </view>
              <view class='created_at'>{{item.created_at}}</view>
            </view>
            <view class='right'>
              <view class='image' 
                    wx:if="{{item.parentObj.attachments.length != 0}}">
                    <image mode='aspectFill' 
                    src='{{baseImageUrl+item.parentObj.attachments[0]}}'></image>
                    </view>
              <view class='content' 
                    wx:if="{{item.parentObj.attachments.length == 0}}">
                      {{item.parentObj.content}} 
                    </view>
            </view>
          </view>
    </view> -->
      <!-- 资料设置 -->
      <view class="settle-info" v-if="selectPoster == 1">
        <image class="user-avatar-border" src="/static/image/v2/border.png"></image>
        <button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
          <image class="settle-avatar" :src="user.avatar" style="width: 100%;height: 100%;"></image>
        </button>
        <view class="nickname-input">
          <view class="nickname-tab">昵称</view>
          <input type="nickname" class="nickname-data-input" bindinput="getNickname" :value="user.nickname"
            placeholder="请输入昵称" />
        </view>

        <view class="set-input">
          <view class="set-ttile">个性签名</view>
          <textarea maxlength="128" :value='user.personal_signature' class='textarea-content'
            placeholder="你在路上随便碰到的一个路人，都是别人做梦都想见到的那人" bindinput="getTextContent" />
        </view>
        <view class="set-save">
          <view class="set-save-button" bindtap="signatureSave">
            <view>保存修改</view>
          </view>
        </view>
      </view>
    </view>

    <view class="call-server" bindtap='openSugesstion'>客服</view>

    <!-- <get-more-loading wx:if="{{showGeMoreLoadin}}"></get-more-loading>
        <not-more wx:if="{{notDataTips}}"></not-more> -->

  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onShow } from '@dcloudio/uni-app'
import Request from '../../../utils/request'

const requestService = new Request()

const selectPoster = ref(1)
const user = ref({
  avatar: 'https://image.qiuhuiyi.cn/tmp/FaGmZ7OnS5o92977bcfedd5124a1fb0db8122aa6244d.jpeg',
  nickname: '哈哈',
  personal_signature: '132456'
})
onShow(() => {

})
</script>

<style lang="less" scoped>
page {
  background: #ffffff;
}

.message-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.message-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  border-top-style: solid;
  border-width: 1rpx;
  border-color: #F0F8FF;
  align-items: center;
}

.message-item {
  width: 90%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #ffffff;
  border-radius: 20rpx;
  box-shadow: 0px 4rpx 10rpx 0px rgba(0, 0, 0, 0.20);
  margin-bottom: 15rpx;
}

.delete-message {
  background: #FFD73B;
  font-size: 20rpx;
  padding: 10rpx;
  border-radius: 5rpx;
  width: 150rpx;
  text-align: center;
}

.message-item .item {
  width: 95%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 10rpx 0rpx;
}

.item .left {
  width: 13%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.avatar-view {
  position: relative;
}

.message-avatar-border {
  width: 60rpx;
  height: 60rpx;
  position: absolute;
  z-index: 200;
  left: -15rpx;
  top: -15rpx;
}

.left .avatar {
  width: 70rpx;
  height: 70rpx;
  border: 4rpx solid #303030;
  border-radius: 28rpx;
}

.item .content {
  width: 62%;
  display: flex;
  flex-direction: column;
  margin-left: 15rpx;
}

.content .username {
  font-size: 30rpx;
  font-family: PingFangSC, PingFangSC-Medium;
  font-weight: 800;
  text-align: left;
  color: #303030;
}

.content .created_at {
  font-size: 22rpx;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 400;
  text-align: left;
  color: #8c8c8c;
}

.item .right {
  width: 23%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

.right image {
  width: 100rpx;
  height: 100rpx;
  border-radius: 20rpx;
}

.praise image {
  width: 40rpx;
  height: 40rpx;
}

.right .content {
  font-size: 27rpx;
  width: 130rpx;
  height: 130rpx;
  overflow: hidden;
  text-overflow: ellipsis;
}

/** 头部切换Tab **/
.poster-container {
  width: 100%;
  height: 120rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  box-shadow: 0px 0px 20rpx 0px rgba(203, 203, 203, 0.50);
  margin-bottom: 30rpx;
}

.poster-data {
  width: 90%;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.poster-data-item {
  display: flex;
  width: 30%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  font-family: SF Pro Text, SF Pro Text-Medium;
  font-weight: 500;
  text-align: LEFT;
  color: #303030;
  line-height: 32rpx;
}

.select-item {}

.select-tab {
  margin-bottom: 15rpx;
}

.select-tab-bootom {
  width: 130rpx;
  height: 10rpx;
  border-radius: 10rpx;
  box-shadow: 0px 0px 8rpx 0px #fbc346;
  background: #fbc346;
  top: 35rpx;
}

.not-select-tab-bootom {
  width: 60rpx;
  height: 10rpx;
  border-radius: 10rpx;
  top: 35rpx;
}

.call-server {
  position: fixed;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100rpx;
  height: 100rpx;
  background: linear-gradient(132deg, #ffd73b 0%, #fbc346 100%);
  border-radius: 50px;
  box-shadow: 0px 0px 10rpx 0px rgba(229, 161, 34, 0.69);
  font-size: 30rpx;
  font-family: SF Pro Text, SF Pro Text-Regular;
  font-weight: 400;
  text-align: CENTER;
  color: #604708;
  line-height: 30rpx;
  bottom: 50rpx;
  right: 30rpx;
}

/** 个人资料设置 **/
.settle-info {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-top: 50rpx;
}

.set-ttile {
  width: 100%;
  font-size: 32rpx;
  font-family: SF Pro Text, SF Pro Text-Heavy;
  font-weight: 800;
  text-align: center;
  color: #303030;
  line-height: 32rpx;
  margin-bottom: 30rpx;
}

.set-input {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.textarea-content {
  width: 600rpx;
  height: 160rpx;
  border: 6rpx solid #303030;
  border-radius: 20rpx;
  padding: 15rpx 15rpx;
  font-size: 28rpx;
  font-family: SF Pro Text, SF Pro Text-Regular;
  font-weight: 400;
  text-align: LEFT;
  color: #808080;
  line-height: 28rpx;
}

.set-save {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 150rpx;
}

.set-save-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 200rpx;
  height: 70rpx;
  background: linear-gradient(132deg, #ffd73b 0%, #fbc346 100%);
  border-radius: 50rpx;
  box-shadow: 0px 0px 10rpx 0px rgba(229, 161, 34, 0.69);
  font-size: 30rpx;
  font-family: SF Pro Text, SF Pro Text-Regular;
  font-weight: 400;
  color: #604708;
  line-height: 30rpx;
}

/** 留言列表 **/
.friend-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 15rpx;
}

.friend-container .container-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  background: white;
  align-items: center;
}

.container-content .content-item {
  display: flex;
  width: 90%;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 120rpx;
  background: #ffffff;
  border-radius: 20rpx;
  box-shadow: 0px 4rpx 10rpx 0px rgba(0, 0, 0, 0.20);
  margin-top: 15rpx;
}

.user-info {
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
}

.user-info .user-name {
  margin-left: 20rpx;
  display: flex;
  flex-direction: column;
}

.message-count {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-size: 22rpx;
  width: 50rpx;
  height: 45rpx;
  background: linear-gradient(159deg, #ffd73b 11%, #fbc346 94%);
  border-radius: 12rpx;
  box-shadow: 0px 0px 10rpx 0px rgba(229, 161, 34, 0.69);
  margin-right: 20rpx;
}

.user-info .avatar {
  width: 70rpx;
  height: 70rpx;
  border: 4rpx solid #303030;
  margin-left: 20rpx;
  border-radius: 25rpx;
}

.avatar-border {
  width: 60rpx;
  height: 60rpx;
  position: absolute;
  z-index: 200;
  left: 6rpx;
  top: -15rpx;
}

.date-time {
  font-size: 22rpx;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 400;
  text-align: left;
  color: #8c8c8c;
}

.user-nickname {
  font-size: 28rpx;
  font-family: PingFangSC, PingFangSC-Medium;
  font-weight: 800;
  text-align: left;
  color: #303030;
}

/** 用户头像昵称设置 **/

.avatar-wrapper {
  width: 120rpx;
  height: 120rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 50rpx;
  border: 5rpx solid #303030;
  border-radius: 40rpx;
  padding: 0rpx 0rpx;
}

.settle-avatar {}

.user-avatar-border {
  width: 90rpx;
  height: 90rpx;
  position: absolute;
  z-index: 200;
  left: 295rpx;
  top: 180rpx;
}

.settle-avatar {
  width: 50rpx;
  height: 50rpx;
}

.nickname-input {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 50rpx;
}

.nickname-tab {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 32rpx;
  font-family: SF Pro Text, SF Pro Text-Heavy;
  font-weight: 800;
  text-align: center;
  color: #303030;
  line-height: 32rpx;
  margin-bottom: 30rpx;
}

.nickname-data-input {
  width: 600rpx;
  border: 6rpx solid #303030;
  border-radius: 20rpx;
}

.nickname-input input {
  padding: 15rpx 15rpx;
}
</style>